<template>
  <div class="app-image-uploader">
    <el-upload list-type="picture-card"
               :limit="1"
               :action="url"
               :on-success="onSuccess"
               name="multipartFile">
      <img v-if="fileList && fileList.length > 0"
           :src="imageUrl(fileList[0].url)"
           style="width: 100%; height: 100%;"/>
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<style lang="scss">
  .app-image-uploader {
    width: 148px;
    height: 148px;
    >div {
      position: relative;
      ul.el-upload-list--picture-card>li {
        z-index: 999;
      }

      .el-upload--picture-card {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
</style>

<script>
  export default {
    props: ['fileList', 'onSuccess'],

    data() {
      return {
        url: `${process.env.API_URL_BASE}/commons/attachments/uploadTmp.do`
      }
    },

    methods: {
      imageUrl(filename) {
        return `${process.env.API_URL_BASE}/commons/attachments/download.do?filename=${filename}`;
      }
    }
  }
</script>
